<template>
	<view class="b_width">
		 
		  <view class="content_box">
			  <view class="b_m_bs">{{info.info.venue}}-{{info.info.cd}}</view>
			  <view class="time_box b_m_bs">{{info.info.day}} {{info.info.week}} {{info.info.times}}</view>
			  <view :class="['zong_box',info.data.status==2?'border':'']">
			  <view :class="[info.data.status==2?'z_box':'','rwm_box']">
				  <canvas v-if="info.data.status==1" canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			  </view>
			  <view class="msg" v-if="info.data.status==2">{{info.data.msg}}</view>
			   </view>
			 
		  </view>
		  <view class="address b_flex_c_s" v-if="info.venue">
		  	<view>
		  		<view class="wz">
		  			{{info.venue.wz}}
		  		</view>
		  	</view>
		  	<view class="img">
		  		<view class="pos">
		  			<image src="@/static/img/venue/pos.png" mode="widthFix" @click="openMap"></image>
		  		</view>
		  	</view>
		  </view>
	</view>
</template>

<script>

	import uQRCode from '@/static/js/uqrcode.js';
	export default{
		data(){
			return{
				src:'',
				params:{id:''},
				info:{info:{day:'',week:'',times:'',venue:'',cd:''}},
				qrcodeSize: 150,
			}
		},
	  onLoad(data){
		  this.params.id=data.id;
		  
		  uQRCode.make({
		  	canvasId: 'qrcode',
		  	text: 'https://daxjtj.jxyuanli.com?qrcode_id='+data.id,
		  	size: this.qrcodeSize,
		  	margin: 10,
		  	success: res => {
		  		this.src = res
		  	}
		  })
	  },
	  onShow() {
	  	this.getInfo();
	  },
	  methods:{
		 async getInfo(){
			let {data}=await venueRwmInfo(this.params);
			this.info=data;
		  },
		  openMap() {
		  	let _ = this;
		  	uni.openLocation({
		  		latitude: Number(_.info.venue.wd),
		  		longitude: Number(_.info.venue.jd),
		  		complete(res) {
		  			console.log(res)
		  		}
		  	})
		  },
	  }
	  
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
	}
	.canvas{
		position: fixed;
		top:-600rpx;
		width: 600rpx;
		height:600rpx;
	}
	.content_box{
		text-align: center;
		box-sizing: border-box;
		padding: 80rpx 0 80rpx 0;
	}
	.time_box{
		
		font-size: 26rpx;
		font-weight: 500;
		color: #6D6D6D;
		
	}
	.address {
		
		border-top: 10rpx solid #F0F0F0;
		padding: 20rpx 0;
		margin: 0 30rpx;
	
	
		.img {
			display: flex;
		}
	
		.img>view {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
	
			image {
				width: 22rpx;
			}
		}
	
		.pos {
			background: #6377F5;
			margin-right: 30rpx;
		}
	
		.tel {
			background: #FF605E;
		}
	}
	
	.rwm_box{
		width: 300rpx;
		height: 300rpx;
		
	}
	.z_box{
		opacity: 0.1;
		z-index: 1;
	}
	.msg{
		position: absolute;
		bottom: 140rpx;
		text-align: center;
		width: 300rpx;
		z-index:100;
		font-size:26rpx;
		font-weight: bold;
	}
	.border{
		border: 5rpx dashed #CCCCCC;
	}
	.zong_box{
		position: relative;
		width: 305rpx;
		height: 305rpx;
		margin: 0 auto;
		overflow:hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	canvas{
		z-index: 1;
		position: none;
	}
</style>